$(function () {
  // 给input建立键盘按下事件
  $("#title").on("keydown", function (e) {
    // 判断当按下回车的时候,拿到input里面的数据
    if (e.keyCode === 13) {
      var input = $(this).val().trim();
      //   判断当Input里面为空的时候提示用户重新输入
      if (input === "") {
        return alert("请重新输入");
      }
      // 设置一个变量保存从input取到的数据
      var obj = {
        title: input,
        done: false,
      };
      //  设置一个变量 将从本地获取的数据和 input里面的值 合到一起
      var data = getData();
      data.unshift(obj);
      setData(data);
      //   渲染页面
      render();
      $(this).val('')
    }
  });
  //    设置一个封装函数获取本地数据
  function getData() {
    // 判断 本地有数据和没数据的情况
    // localStorage.getItem('todo') 里面的数据是对象 要把他转成字符串型
    return JSON.parse(localStorage.getItem("todo")) || [];
  }
  // 设置一个封装函数把获取到的数据存到本地
  function setData(data) {
    localStorage.setItem("todo", JSON.stringify(data));
  }
  // 定义一个函数将数据渲染到页面
  function render() {
    // 同时先获取本地数据
    var data = getData();
    var ol = "";
    var ul = "";
    //    然后再遍历获取到的数据,把他们分别加入到ol和 ul
    $.each(data, function (i, item) {
      if (item.done) {
        ul += `
                <li>
                <input type= "checkbox" checked>
                <p>${item.title}</p>
                <a href = "javasrcipt:;" index = ${i}></a>
                 </li> 
                `;
      } else {
        ol += `
                <li>
                <input type= "checkbox" >
                <p>${item.title}</p>
                <a href = "javasrcipt:;" index = ${i} ></a>
                 </li> 
                `;
      }
    });
    $("ol").html(ol);
    $("ul").html(ul);
  }
  render();
  // 判断 input 里面的checked的属性
  $("ol ,ul").on("click", "input", function () {
    //    先获取数据
    data = getData();
    //    获取当前li 的索引号,用 a 来获取 自定义索引
    var index = $(this).siblings("a").attr("index");
    // 本地数据
    data[index].done = $(this).prop("checked");
    // 更新页面数据
    setData(data);
    // 最后再渲染页面
    render();
  });
//当用户进行删除时候

$("ol ,ul").on("click", "a", function () {
   if(confirm('你确定要删除吗?')){
    //    先获取本地数据
    data = getData();
    // 删除当前a 的父元素 li
    data.splice($(this).attr('index') ,1)
    // 更新本地数据,渲染页面
    setData(data);
    render();
   }



})





})
